<template>
  <a-modal 
        :visible="visible"
        okText="确定" 
        cancelText="取消"
        :title="title"
        :maskClosable="false"
        :destroyOnClose="true"
        :keyboard="false"
        :closable="false"
        width="400px"
        @cancel="closeModal()" 
        @ok="handleSubmit">
        <a-form-model :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }"
            :model="formData" 
            :rules="rules"
            ref="ruleForm">
            <a-form-model-item label="打折" prop="discountPrice">
                <a-input-number style="width:200px;" v-model="formData.discountPrice" :precision="1" :min="0.1" :max="9.9"/>
            </a-form-model-item>
        </a-form-model>
  </a-modal>
</template>

<script>
export default {
    props: {
        visible:{
            type:Boolean,
            default:false,
        },
    },
    data(){
        return {
            title:'批量设置折扣',
            formData:{
                discountPrice:'',
            },
            rules:{
                discountPrice: [{ required:true, message:'请输入0.1-9.9'}],
            }
        }
    },
    methods:{
        closeModal (freshTable) {
            this.$emit('cancel', freshTable)
        },
        handleSubmit(){
            this.$refs.ruleForm.validate(valid=>{
                console.log('valid',valid);
                if(valid){
                    console.log('this.formData',this.formData);
                    this.$emit('submit',this.formData);
                }
            });
        }
    }
}
</script>

<style lang="less" scoped>

</style>